<template>

</template>
<script>
import imgUpload from './img-upload'
export default {
  name: '',
  props: {
    type: {
      type: String,
      required: true,
      default: 'single'
    },
    length: {
      type: Number,
      default: 4
    }
  },
  data () {
    return {
      answers: [],
      imageUrl: Array(this.length).fill(null),
      ansDesp: {
        0: null,
        1: null,
        2: null,
        3: null
      },
      option: {
        code: '',
        title: '',
        img: '',
        isRight: ''
      }
    }
  },
  created () {
    for (let i = 4; i < this.length; i++) {
      this.$set(this.ansDesp, i, null)
    }
  },
  components: {
    imgUpload
  },
  methods: {
    handleAvatarSuccess (...args) {
      this.imageUrl.splice(args[0], 1, URL.createObjectURL(args[2].raw))
      this.option.img = this.imageUrl[args[0]]
      this.changeOption()
    },
    handleClickDelImg (index) {
      this.imageUrl.splice(index, 1, undefined)
      this.option.img = ''
      this.changeOption()
    },
    handleChangeAnsDesp (index, value) {
      this.ansDesp[index] = value
      this.option.title = value
      this.changeOption()
    },
    changeOption () {
      this.$emit('setOptions', this.option)
    },
    setSelect (value) {
      this.option.code = value
      this.option.isRight = true
      this.changeOption()
    }
  }
}
</script>
<style lang="scss" scoped>
.select-item {
  display: flex;
  align-items: center;
  margin-top: 20px;
  ::v-deep .el-input__inner {
    height: 30px;
  }
}
.avatar-uploader {
  margin-left: 10px;
}
::v-deep .avatar-uploader .el-upload {
  width: 100px;
  height: 100%;
  cursor: pointer;
  position: relative;
  vertical-align: middle;
  .avatar-box {
    height: 100%;
    border: 1px dashed #d3d3d3;
    border-radius: 6px;
    &:hover {
      border-color: #409eff;
    }
  }
}
::v-deep .avatar-text {
  font-size: 12px;
  line-height: 50px;
}
.avatar {
  width: 100%;
  display: block;
}
::v-deep .avatar-del {
  position: absolute;
  top: 0;
  right: 0;
  transform: translate(50%, -50%);
  background-color: #fff;
  color: #000;
  font-size: 18px;
  border-radius: 50%;
}
</style>
